<template>
  <el-table-column
    :min-width="200"
    :fixed="false"
    align="center"
  >
    <el-popover v-model="visiable" placement="bottom-start" trigger="focus">
      <template #default>
        <!--    搜索框    -->
        <div class="flex justify-between align-center mb-10">
          <el-input
            v-model="searcher.name"
            placeholder="请输入内容,按回车搜索"
            prefix-icon="el-icon-search"
            class="mr-10"
            @change="search"
          />
          <span style="font-size: 25px" class="cursor-pointer" @click="closepop">
            <svg-icon icon-class="close" />
          </span>
        </div>
        <!--    检索表格    -->
        <el-table
          ref="multipleTable"
          v-loading="loading"
          class="mb-10"
          :data="data"
          row-key="code"
          style="width: 100%"
          @row-click="handleRowClick"
        >
          <template v-for="(item,index) in filedList">
            <ik-column-select
              v-if="item.type==='select'"
              :key="index"
              :code="item.code"
              key-field="key"
              value-field="value"
              :name="item.name"
              :options="item.options"
              width="120"
              :edit="false"
            />
            <el-table-column
              v-else
              :key="index"
              :property="item.code"
              :label="item.name"
              width="120"
              align="center"
            />
          </template>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next ,total"
          :current-page.sync="pagination.pageNo"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          @current-change="pageChange"
        />
      </template>
      <template #reference>
        <el-input v-model="result" class="item" size="small" />
      </template>
    </el-popover>
  </el-table-column>
</template>

<script>
import { DataTableMixin } from "@/components/ik/form/popup/mixins/tableMethod"

export default {
  name: "IkFormPopupSelect",
  mixins: [DataTableMixin],
  props: {
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: () => {
        return []
      }
    },
    name: { type: String, default: "" },
    filedList: {
      type: Array,
      default: function() {
        return [
          { code: 'id', name: 'ID' },
          { code: 'code', name: '编码' },
          { code: 'name', name: '名称' }
        ]
      }
    },
    code: { type: String, default: "" },
    value: { type: String, default: "" },
    valueCode: { type: String, default: "code" }
  },
  data() {
    return {
      result: "",
      visiable: false
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value(val) {
      this.result = val
    }
  },
  mounted() {
    this.result = this.value
    this.search()
  },
  methods: {
    /**
     * 关闭
     */
    closepop() {
      this.visiable = false
    },
    /**
     * 行被点击
     * @param row
     */
    handleRowClick(row) {
      this.$emit('onPopupClick', this.code, row)
      this.visiable = false
      this.result = row[this.valueCode]
      // this.result = row[this.code]
      // this.$emit("input", this.result)
    }
  }
}
</script>

<style scoped>
::v-deep.require > .el-input__inner {
  border: red 1px solid;
}

.item {
  width: calc(100% - 30px)
}
</style>
<style lang="scss" scoped>
.tag-wrapper {
  min-height: 24px;
  max-width: 295px;
  flex-wrap: wrap;
}

.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}

.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

